<template>
	<view class="container">
		<!-- 加载动画 -->
		<view class="loading-container" v-if="isLoading">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 原有内容 -->
		<view :class="{ 'content-hidden': isLoading }">
			<!-- 顶部轮播图 -->
			<view class="banner-section">
				<swiper class="banner-swiper" circular autoplay interval="3000" duration="500" indicator-dots
					indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image :src="item.imageUrl" mode="aspectFill" class="banner-image"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 功能导航区域 -->
			<view class="content-section">
				<view class="section-title">
					<text>功能导航</text>
				</view>
				<view class="entrance-grid">
					<view v-for="(item, index) in filteredButtons" :key="index" class="grid-item"
						@click="handleButtonClick(item)">
						<view class="icon-container" :class="'bg-' + (index % 5)">
							<image class="icon" :src="item.icon"></image>
						</view>
						<view class="title">{{ item.title }}</view>
					</view>
				</view>
			</view>

			<!-- 消息中心区域 -->
			<view class="notification-section">
				<view class="section-header">
					<view class="section-title">
						<text>消息中心</text>
					</view>
				</view>
				<scroll-view class="notification-list" scroll-y>
					<template v-if="notifications.length > 0">
						<view v-for="(item, index) in notifications" :key="item.id" 
							class="notification-item"
							:class="{ 'unread': !item.isRead }" 
							@click=""
							:style="{ animationDelay: index * 0.1 + 's' }">
							<view class="notification-content">
								<view class="notification-header">
									<view class="notification-title">
										<text class="title-text">{{ item.title }}</text>
										<text v-if="!item.isRead" class="unread-dot"></text>
									</view>
									<text class="notification-time">{{ item.time }}</text>
								</view>
								<view class="notification-desc">{{ item.content }}</view>
							</view>
						</view>
					</template>
					<view v-else class="empty-state">
						<image src="/static/images/empty-message.png" mode="aspectFit" class="empty-image"></image>
						<text class="empty-text">当前暂无消息</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import '@/index.scss';
import { onShow, onLoad, onReady } from '@dcloudio/uni-app';
import { userInfo, userStatus,contactGetUser,getDeptUsers, getMessageByUserId } from '@/common/js/api.js';
import { navigateTo,checkIfContact } from '../../common/js/common';
import PartyProgress from '@/components/PartyProgress/PartyProgress.vue';


const bannerList = ref([
	{
		imageUrl: '/static/images/bgtest.png'
	},
	{
		imageUrl: '/static/images/bg2.png'
	},
	{
		imageUrl: '/static/images/bg3.png'
	}
]);

// 功能按钮数据
const functionButtons = ref([
	{
		title: '填写入党申请书',
		icon: '/static/buttonImgs/填写入党申请书.png',
		path: '/pages/applyFor/applyFor',
		roles: ['用户'] ,
		contactShow:false	
	},
	{
		title: '填写入党志愿书',
		icon: '/static/buttonImgs/填写入党志愿书.png',
		path: '/pages/volunteerFor/volunteerFor',
		roles: ['用户'],
		contactShow:false	
	},
	{
		title: '上传考察记录',
		icon: '/static/buttonImgs/上传考察记录.png',
		path: '/pages/inspection/upload',
		roles: ['用户'] ,
		contactShow:true	
	},
	{
		title: '培养联系人',
		icon: '/static/buttonImgs/培养联系人.png',
		path: '/pages/contacts/mycontacts',
		roles: ['用户'],
		contactShow:false	
	},
	{
		title: '我的申请',
		icon: '/static/buttonImgs/我的申请.png',
		path: '/pages/promotion/apply',
		roles: ['用户'] ,
		contactShow:false	
	},
	{
		title: '入党进度',
		icon: '/static/buttonImgs/入党进度.png',
		path: '/pages/progress/myprogress',
		roles: ['用户'],
		contactShow:false	
	},
	{
		title: '审核入党申请书',
		icon: '/static/buttonImgs/审核入党申请书.png',
		path: '/pages/party/auditApplication',
		roles: ['党支部']
	},
	{
		title: '审核入党志愿书',
		icon: '/static/buttonImgs/审核入党志愿书.png',
		path: '/pages/party/auditVolunteer',
		roles: ['党支部'] // 只有党支部可以审核
	},
	{
		title: '发起谈话',
		icon: '/static/buttonImgs/发起谈话.png',
		path: '/pages/talk/create',
		roles: ['党支部'] // 只有党支部可以发起
	},
	{
		title: '指定培养联系人',
		icon: '/static/buttonImgs/指定培养联系人.png',
		path: '/pages/party/assignContact',
		roles: ['党支部'] // 只有党支部可以指定
	},
	{
		title: '指定入党介绍人',
		icon: '/static/buttonImgs/指定入党介绍人.png',
		path: '/pages/party/assignIntroduce',
		roles: ['党支部'] // 只有党支部可以指定
	},
	{
		title: '支部成员',
		icon: '/static/buttonImgs/支部成员.png',
		path: '/pages/party/deptMembers',
		roles: ['党支部'] // 只有党支部可以查看
	},
	{
		title: '审核申请',
		icon: '/static/buttonImgs/审核申请.png',
		path: '/pages/party/promotion',
		roles: ['党支部'] // 只有党支部可以查看
	},
	{
		title: '我的培养对象',
		icon: '/static/buttonImgs/培养联系人.png',
		path: '/pages/mycontactusers/mycontactusers',
		roles: ['用户'] ,
		contactShow: true
	},
]);

// 信息提示数据
const notifications = ref([
	
]);

// 模拟数据 - 用户党员发展阶段列表(用于获取不到的时候进行展示)
const mockStages = [
	{
		title: '群众',
		desc: '2023-09-15'
	},
	{
		title: '入党积极分子',
		desc: '2023-12-20'
	},
	{
		title: '发展对象',
		desc: '2024-03-25'
	},
	{
		title: '预备党员',
		desc: ''
	},
	{
		title: '正式党员',
		desc: ''
	}
];


const list1 = ref(mockStages);

// 当前登录用户信息
const user = ref({
	account: '',
	age: 0,
	avatarUrl: '',
	gender: null,
	name: '',
	phone: '',
	pwd: '',
	politicalStatus: ''
});

const currentIndex = ref(0);
const userId = uni.getStorageSync('userId');
var isContact = false;

// 根据用户身份过滤显示的按钮
const filteredButtons = computed(() => {
	return functionButtons.value.filter(button => {
		// 如果没有指定角色限制，或用户角色为空，则默认显示
		if (!button.roles || !button.roles.length || !user.value.politicalStatus) {
			return true;
		}
		
		if (isContact) {
			return button.contactShow;
		}
		
		// 判断用户角色是否在当前按钮的可见角色列表中
		return button.roles.includes(user.value.role) && !button.contactShow;
	});
});

// 添加加载状态
const isLoading = ref(false);


// 修改 onLoad 和 onShow
onLoad(async() => {
	isLoading.value = true;
	uni.showLoading({
		title: '加载中'
	});
	
	isContact = await checkIfContact(userId);
	
	const res = await getMessageByUserId(userId);
	if (res.code == 200) {
		const records = res.data.page.records;
		for (var i = 0;i < records.length;++i) {
			records[i].time = records[i].time.substring(0,10);
			notifications.value.push(records[i]);
		}
	} else {
		console.log("获取信息列表失败");
	}

	userInfo(userId).then(result => {
		user.value = result;
		console.log(user.value.politicalStatus);
		userStatus().then(res => {
			var userStatusList = res.userStatusList;
			for (var i = 0; i < 5; ++i) {
				if (user.value.politicalStatus == list1.value[i].title) {
					currentIndex.value = i;
				}
				userStatusList.forEach((item) => {
					if (item.status == list1.value[i].title) {
						list1.value[i].desc = item.updateTime;
					}
				});
			}
			// 数据加载完成后隐藏加载动画
			setTimeout(() => {
				isLoading.value = false;
				uni.hideLoading();
			}, 500);
		});
	});
});

onReady(() => {
	// 确保在任何情况下都隐藏loading
	uni.hideLoading();
});



// 处理按钮点击
const handleButtonClick = async (item) => {
	if (item.path === '/pages/inspection/upload') {
		// 检查用户是否有权限上传考察记录
		const resp = await contactGetUser(userId);
		const userIdList = resp.data;
		if (userIdList.length == 0) {
			uni.showToast({
				title: '您不是培养联系人，暂无权限',
				icon: 'none',
				duration: 2000
			});
		} else {
			uni.navigateTo({
				url: item.path
			});
		}
	} else {
		if (item.path === '/pages/volunteerFor/volunteerFor') {
			const resp_user = await userInfo(userId);
			console.log(resp_user);
			if (resp_user.politicalStatus != '发展对象') {
				uni.showToast({
					title: '您不是发展对象，暂无权限',
					icon: 'none',
					duration: 2000
				});
			} else {
				uni.navigateTo({
					url: item.path
				});
			}
		} 
		else if (item.path === '/pages/applyFor/applyFor') {
			const resp_user = await userInfo(userId);
			console.log(resp_user);
			if (resp_user.politicalStatus != '群众') {
				uni.showToast({
					title: '您不是群众，暂无权限',
					icon: 'none',
					duration: 2000
				});
			} else {
				uni.navigateTo({
					url: item.path
				});
			}
		}
		else {
			uni.navigateTo({
				url: item.path
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f8f8f8;
}

.banner-section {
	width: 100%;
	height: 400rpx;
	position: relative;

	.banner-swiper {
		width: 100%;
		height: 100%;

		.banner-image {
			width: 100%;
			height: 100%;
		}
	}
}

.function-section {
	margin-top: 20rpx;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

	.function-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx;

		.function-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10rpx;

			.function-icon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.iconfont {
					font-size: 48rpx;
					color: #fff;
				}
			}

			.function-name {
				font-size: 24rpx;
				color: #333;
			}
		}
	}
}

.content-section {
	margin: 20rpx 30rpx;
	position: relative;
	border-radius: 20rpx;
	background-color: #ffffff;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	padding: 30rpx;

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		padding-left: 20rpx;
		border-left: 8rpx solid #FF7A45;
	}
}

.entrance-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;

	.grid-item {
		width: 33.33%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 10rpx;
		margin-bottom: 20rpx;

		.icon-container {
			width: 100rpx;
			height: 100rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 15rpx;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;

			&.bg-0 {
				background: linear-gradient(135deg, #ff9a9e, #fad0c4);
			}

			&.bg-1 {
				background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
			}

			&.bg-2 {
				background: linear-gradient(135deg, #ffecd2, #fcb69f);
			}

			&.bg-3 {
				background: linear-gradient(135deg, #84fab0, #8fd3f4);
			}

			&.bg-4 {
				background: linear-gradient(135deg, #fccb90, #d57eeb);
			}

			&:active {
				transform: scale(0.95);
			}

			.icon {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.title {
			font-size: 24rpx;
			color: #333;
			font-weight: 500;
			text-align: center;
			padding: 0 10rpx;
		}
	}
}

.notification-section {
	margin: 20rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	padding: 30rpx;
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		
		.section-title {
			font-size: 34rpx;
			font-weight: 600;
			color: #333;
			position: relative;
			padding-left: 24rpx;
			
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 32rpx;
				background: #ff7a45;
				border-radius: 3rpx;
			}
		}
		
		.more-text {
			font-size: 26rpx;
			color: #999;
		}
	}
	
	.notification-list {
		max-height: 600rpx;
	}
	
	.notification-item {
		display: flex;
		align-items: flex-start;
		padding: 24rpx;
		margin-bottom: 20rpx;
		background: #f8f8f8;
		border-radius: 16rpx;
		transition: all 0.3s ease;
		animation: slideIn 0.5s ease forwards;
		opacity: 0;
		position: relative;
		
		&:active {
			transform: scale(0.98);
			background: #f0f0f0;
		}
		
		&.unread {
			background: #f8f8f8;
		}
		
		&:not(:last-child)::after {
			content: '';
			position: absolute;
			left: 24rpx;
			right: 24rpx;
			bottom: -10rpx;
			height: 2rpx;
			background: #eee;
		}
		
		.notification-content {
			flex: 1;
			
			.notification-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12rpx;
				
				.notification-title {
					display: flex;
					align-items: center;
					
					.title-text {
						font-size: 30rpx;
						font-weight: 500;
						color: #333;
					}
					
					.unread-dot {
						width: 12rpx;
						height: 12rpx;
						background: #ff7a45;
						border-radius: 50%;
						margin-left: 12rpx;
					}
				}
				
				.notification-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.notification-desc {
				font-size: 26rpx;
				color: #666;
				line-height: 1.6;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 0;
		
		.empty-image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

// 添加加载动画样式
.loading-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.9);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.loading-spinner {
	width: 60rpx;
	height: 60rpx;
	border: 6rpx solid #f3f3f3;
	border-top: 6rpx solid #ff7a45;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20rpx;
}

.loading-text {
	color: #666;
	font-size: 28rpx;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.content-hidden {
	opacity: 0;
	transition: opacity 0.3s ease;
}
</style>
